<template>
  <div class="header">
    <div class="center">公司员工管理系统</div>
    <div class="right">
      <span><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></span>&nbsp;&nbsp;&nbsp;
      <span class="welcome">管理者&nbsp;&nbsp;{{uname}}</span>&nbsp;&nbsp;&nbsp;
      <button class="logout" @click="logout">退出</button>
    </div>
  </div>
</template>

<script>
export default {
    name:'SysHeader',
    data(){
        return{
          
        }
    },
    methods:{
      logout(){
        sessionStorage.removeItem('token')
        this.$store.dispatch('logout')
        this.$router.push('/login')
      }
    },
    computed:{
      uname(){
        return this.$store.state.login.uname
      }
    }
}
</script>

<style lang='less' scoped>
  .header{
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    background: url(../../assets/images/background.jpg),no-repeat;
    color:#fff;
    position: relative;
    .center{
      font-size: 1rem;
      width: 8rem;
      line-height: 3rem;
      margin: auto;
    }
    .right{
      position: absolute;
      top: 0.24rem;
      right: 1rem;
      font-size:0.5rem ;
      display: flex;
      justify-content: center;
      align-items: center;
      .logout{
        font-size:0.5rem ;
        width: 2.5rem;
        height: 1.5rem;
      }
    }
  }
</style>